<template>
  <div>
    <el-tooltip class="item" effect="dark" placement="bottom" :disabled="tooltipDisabled">
      <div class="flex align-center justify-between" v-if="filed.filedName == 'difference' || filed.filedName == 'actualExecutionDifference' || filed.filedName == 'expectExecutionDifference' || filed.filedName == 'currentLastPlanDifferent' || filed.filedName == 'lastPlanExecutionDifferent'">
        <div>
          <span v-if="model[filed.filedName].amount == emptyTxt" :class="pointClass" @click="goInfo(model)" @mouseenter="getProjectIncomeExpend">
            {{ filed.filedName == 'lastPlanExecutionDifferent' ? '去年无计划' : model[filed.filedName].amount }}
          </span>
          <span v-else-if="['计划外', '本年新增'].indexOf(model[filed.filedName].amount) > -1" :class="pointClass" @click="goInfo(model)" @mouseenter="getProjectIncomeExpend">
            <span :class="colorClass(Math.abs(model[getAmountField(filed.filedName)].amount))">{{ Math.abs(model[getAmountField(filed.filedName)].amount) | moneyFilterNoUnit }}({{ model[filed.filedName].amount }})</span>
          </span>
          <span v-else class="font-size-16" :class="colorClass(model[filed.filedName].amount)" @click="goInfo(model)" @mouseenter="getProjectIncomeExpend">{{ model[getAmountField(filed.filedName)].amount | moneyFilterNoUnit }}（{{ model[filed.filedName].amount | accMul }}%）</span>
        </div>
        <!-- 项目月报 分类汇总 按照expectExecutionDifference排序 -->
        <div class="flex-column" v-if="filed.filedName == 'expectExecutionDifference' && model.level != 1 && pageType == 'projectMonth' && model.hasChildren">
          <!-- 从小到大 -->
          <i class="el-icon-caret-top cursor-pointer color-grey" :class="sortState == 'asc' ? 'color-black' : ''" @click="sortFn(model, 'asc')"></i>
          <!-- 从大到小 -->
          <i class="el-icon-caret-bottom cursor-pointer color-grey" :class="sortState == 'desc' ? 'color-black' : ''" @click="sortFn(model, 'desc')"></i>
        </div>
      </div>
      <div v-else class="font-size-16" :class="monthAmountClass" @mouseenter="getProjectIncomeExpend" @click="goInfo(model)">
        <template v-if="model.assetRentStatus == 'notOperation'">
          <template v-if="model[filed.filedName].amount">{{ model[filed.filedName].amount | moneyFilterNoUnit }}</template>
          <template v-else>无数据</template>
        </template>
        <template v-else>
          {{ model[filed.filedName].amount | moneyFilterNoUnit }}
        </template>
      </div>

      <!-- 集团 | 项目 月度的浮层 -->
      <template v-if="(pageType == 'groupMonth' || pageType == 'projectMonth') && classifyKey == 'month'">
        <div slot="content" class="padding-5">
          <div class="mask-item font-size-16 margin-bottom-5">{{ filed.label }}{{ model.classificationName }}</div>
          <div class="mask-item">
            <span>计划：</span>
            <span v-if="model[filed.filedName].planAmount">{{ model[filed.filedName].planAmount | moneyFilterNoUnit }}</span>
            <span v-else>{{ model.assetRentStatus == 'notOperation' ? '无数据' : '0.00' }}</span>
          </div>
          <div class="mask-item">
            {{ filed.index + 1 > $route.query.month ? '预测' : '实际' }}执行：
            <span v-if="model[filed.filedName].executionAmount">{{ model[filed.filedName].executionAmount | moneyFilterNoUnit }}</span>
            <span v-else>{{ model.assetRentStatus == 'notOperation' ? '无数据' : '0.00' }}</span>
          </div>
          <div class="mask-item">
            <span>差异：</span>
            <span v-if="!model[filed.filedName].planAmount && !model[filed.filedName].executionAmount">本月无计划</span>
            <template v-else>
              <span v-if="model[filed.filedName].differenceAmount">{{ model[filed.filedName].differenceAmount | moneyFilterNoUnit }}</span>
              <span v-else>{{ model.assetRentStatus == 'notOperation' ? '无数据' : '0.00' }}</span>
            </template>
          </div>
          <div v-if="deviationRate == emptyTxt || deviationRate == '计划外'" class="mask-item">差异率：{{ deviationRate }}</div>
          <div v-else class="mask-item">
            <span>差异率：</span>
            <span v-if="model[filed.filedName].difference">{{ model[filed.filedName].difference | accMul }}%</span>
            <span v-else>{{ model.assetRentStatus == 'notOperation' ? '无数据' : '0.00' }}</span>
          </div>
          <el-button v-if="pageType == 'projectMonth' && model[filed.filedName].detailList" class="f-right margin-top-10" size="mini" type="primary" @click="diffAnalyseFn" :disabled="model[filed.filedName].differenceAmount ? false : true">差异分析</el-button>
          <el-button v-if="pageType == 'groupMonth' && model.level == 1" class="f-right margin-top-10" size="mini" type="primary" @click="diffAnalyseFn" :disabled="model[filed.filedName].differenceAmount ? false : true">差异分析</el-button>
        </div>
      </template>

      <!-- 项目月报的分类汇总的支出 除了第一行 -->
      <template v-else-if="pageType == 'projectMonth' && classifyKey == 'collect' && !isIncome && !isHeader">
        <div slot="content" class="padding-5">
          <div class="font-size-16 margin-bottom-10 font-weight-700 margin-top-5">{{ model.classificationName }}相关合同</div>
          <div v-if="contractList && contractList.length > 0">
            <el-link class="mask-item block-box" v-for="item in contractList" :key="item.primaryKey" @click="goContractInfo(item)">·&emsp;{{ item.contractName }}</el-link>
            <el-pagination class="normal-pagination bg-black-box f-right" v-if="total > pageSize" layout="prev, pager, next" :page-size="pageSize" @current-change="pageChange" :current-page.sync="currentPage" :background="false" :total="total"> </el-pagination>
          </div>
          <div v-else class="mask-item">暂无合同</div>
        </div>
      </template>

      <template v-else>
        <div slot="content" class="padding-5" v-if="filed.filedName == 'difference' || filed.filedName == 'actualExecutionDifference' || filed.filedName == 'expectExecutionDifference' || filed.filedName == 'currentLastPlanDifferent' || filed.filedName == 'lastPlanExecutionDifferent'">
          <div class="mask-item" v-for="(item, index) in model[filed.filedName].detailList" :key="index">
            <template v-if="filed.filedName == 'difference' || filed.filedName == 'currentLastPlanDifferent' || filed.filedName == 'lastPlanExecutionDifferent'">
              <template v-if="item.planAmount !== 0 && item.executionAmount === 0"> {{ item.itemName }}:&nbsp;&nbsp;本年新增 </template>
              <template v-else-if="item.planAmount === 0 && item.executionAmount === 0"> {{ item.itemName }}:&nbsp;&nbsp;{{ filed.filedName == 'lastPlanExecutionDifferent' ? '去年无计划' : emptyTxt }} </template>
              <template v-else> {{ item.itemName }}&nbsp;&nbsp;{{ item.amount | accMul }}% </template>
            </template>
            <template v-else>
              <template v-if="item.planAmount === 0 && item.executionAmount !== 0"> {{ item.itemName }}:&nbsp;&nbsp;计划外</template>
              <template v-else-if="item.planAmount === 0 && item.executionAmount === 0"> {{ item.itemName }}:&nbsp;&nbsp;{{ emptyTxt }} </template>
              <template v-else> {{ item.itemName }}&nbsp;&nbsp;{{ item.amount | accMul }}% </template>
            </template>
          </div>
        </div>
        <div slot="content" class="padding-5" v-else>
          <div class="mask-item" v-for="(item, index) in model[filed.filedName].detailList" :key="index">{{ item.itemName }}&nbsp;&nbsp;{{ item.amount | moneyFilterNoUnit }}万元</div>
        </div>
      </template>
    </el-tooltip>
  </div>
</template>
<script>
  import { apiProjectIncomeExpend } from '@a/about';
  export default {
    props: {
      // groupYear: 集团年度, groupMonth: 集团月度,  projectYear: 项目年度, projectMonth: 项目月度
      pageType: {
        type: String,
        default: '',
      },
      //collect分类汇总 month月度明细
      classifyKey: {
        type: String,
        default: '',
      },
      //operate:经营性 noOperate:非经营性
      operateType: {
        type: String,
        default: '',
      },
      // 支出还是收入
      isIncome: {
        type: Boolean,
        default: false,
      },
      emptyTxt: {
        type: String,
        default: '',
      },
      model: {
        type: Object,
        default: () => {
          return {};
        },
      },
      filed: {
        type: Object,
        default: () => {
          return {};
        },
      },
      isHeader: {
        type: Boolean,
        default: false,
      },
    },

    computed: {
      tooltipDisabled() {
        if (this.pageType == 'groupMonth') {
          if (this.classifyKey == 'month') {
            return false;
          } else {
            return this.model[this.filed.filedName].detailList && this.model[this.filed.filedName].detailList.length > 0 ? false : true;
          }
        } else if (this.pageType == 'projectMonth') {
          if (this.classifyKey == 'month') {
            return false;
          } else if (this.classifyKey == 'collect' && !this.isIncome) {
            return this.model.level == 1 ? false : true;
          } else {
            return this.model[this.filed.filedName].detailList && this.model[this.filed.filedName].detailList.length > 0 && !this.model.relationAssetStatus ? false : true;
          }
        } else if (this.pageType == 'projectYear') {
          return this.model[this.filed.filedName].detailList && this.model[this.filed.filedName].detailList.length > 0 && !this.model.relationAssetStatus ? false : true;
        } else {
          return this.model[this.filed.filedName].detailList && this.model[this.filed.filedName].detailList.length > 0 ? false : true;
        }
      },
      colorClass() {
        return function (val) {
          let result = '';
          let colorClass = '';
          let pointClass = this.getPointerClass();
          if (this.isIncome) {
            colorClass = val > 0 ? 'color-green' : 'color-red';
          } else {
            colorClass = val > 0 ? 'color-red' : 'color-green';
          }
          result = colorClass + ' ' + pointClass;
          return result;
        };
      },
      pointClass() {
        let pointClass = this.getPointerClass();
        return pointClass;
      },
      deviationRate() {
        if (this.model[this.filed.filedName].executionAmount == 0 && this.model[this.filed.filedName].planAmount == 0) {
          return this.emptyTxt;
        } else if (Number(this.model[this.filed.filedName].executionAmount) != 0 && this.model[this.filed.filedName].planAmount == 0) {
          return '计划外';
        }
      },
      monthAmountClass() {
        let result = '';
        let colorClass = '';
        let pointClass = this.getPointerClass();
        if ((this.pageType == 'groupMonth' || this.pageType == 'projectMonth') && this.classifyKey == 'month') {
          if (this.isIncome) {
            colorClass = this.model[this.filed.filedName].executionAmount > this.model[this.filed.filedName].planAmount ? 'color-green' : this.model[this.filed.filedName].executionAmount < this.model[this.filed.filedName].planAmount ? 'color-red' : 'color-333333';
          } else {
            colorClass = this.model[this.filed.filedName].executionAmount < this.model[this.filed.filedName].planAmount ? 'color-green' : this.model[this.filed.filedName].executionAmount > this.model[this.filed.filedName].planAmount ? 'color-red' : 'color-333333';
          }
        }
        result = colorClass + ' ' + pointClass;
        return result;
      },
    },

    data() {
      return {
        contractList: [],
        pageSize: 10,
        currentPage: 1,
        total: 0,
        sortState: '',
      };
    },

    methods: {
      //项目月报支出汇总第一级浮层
      async getProjectIncomeExpend(more) {
        this.currentPage = more ? this.currentPage : 1;
        if (this.pageType == 'projectMonth' && this.classifyKey == 'collect' && !this.isIncome && this.model.level == 1) {
          let res = await apiProjectIncomeExpend({
            projectKeys: this.$route.query.projectKey ? [this.$route.query.projectKey] : null,
            year: this.$route.query.year,
            month: this.$route.query.month,
            chargeItemKey: this.model.classificationKey,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          });
          this.contractList = res.rows || [];
          this.total = res.total || 0;
        }
      },

      //差异分析
      diffAnalyseFn() {
        this.$emit('diffAnalyseFn', this.filed, this.model);
      },

      /************
        集团计划：集团行不跳  项目行跳项目
        项目计划：全都不跳
        集团月报：只点击年度预算列跳转对应的收入支出页 （集团跳集团 项目跳项目），项目行跳对应项目的收入支出页
        项目月报：只点击年度预算列跳转对应项目的收入支出页
      **********/
      goInfo(row) {
        let pathName = '';
        let queryData = {
          year: this.$route.query.year || '',
          manage: this.operateType,
          classifyKey: this.classifyKey,
        };
        //项目计划不跳转
        if (this.pageType == 'projectYear') return;

        //集团计划
        if (this.pageType == 'groupYear' && row.isProject) {
          pathName = this.isIncome ? 'compile-income-plan' : 'compile-pay-plan';
          queryData.headerName = '项目计划';
          queryData.planProjectName = row.description;
          queryData.projectKey = row.classificationKey;
          this.doSkip(pathName, queryData);
        }

        //集团月报
        if (this.pageType == 'groupMonth') {
          if (row.isProject) {
            if (this.filed.filedName == 'yearlyBudgetAmount') {
              pathName = this.isIncome ? 'compile-income-plan' : 'compile-pay-plan';
              queryData.headerName = '项目计划';
              queryData.projectKey = row.classificationKey;
              queryData.planProjectName = row.description;
            } else {
              pathName = this.isIncome ? 'execute-income-plan' : 'execute-pay-plan';
              queryData.headerName = '项目月报';
              queryData.projectKey = row.classificationKey;
              queryData.planProjectName = row.description;
              queryData.month = this.filed.isMonth ? this.filed.index + 1 : this.$route.query.month;
            }
            this.doSkip(pathName, queryData);
          } else {
            if (this.filed.filedName != 'yearlyBudgetAmount') return;
            pathName = this.isIncome ? 'year-income-plan' : 'year-pay-plan';
            queryData.headerName = '集团计划';
            queryData.planProjectName = '集团';
            this.doSkip(pathName, queryData);
          }
        }

        //项目月报
        if (this.pageType == 'projectMonth') {
          if (this.filed.filedName != 'yearlyBudgetAmount') return;
          pathName = this.isIncome ? 'compile-income-plan' : 'compile-pay-plan';
          queryData.headerName = '项目计划';
          queryData.projectKey = this.$route.query.projectKey;
          queryData.planProjectName = this.$route.query.planProjectName;
          this.doSkip(pathName, queryData);
        }
      },

      doSkip(pathName, queryData) {
        let pathUrl = {
          name: pathName,
          query: queryData,
        };

        let { href } = this.$router.resolve(pathUrl);
        window.open(href);
      },

      //差异率对应的金钱字段
      getAmountField(fateField) {
        let keyList = ['difference', 'expectExecutionDifference', 'actualExecutionDifference', 'currentLastPlanDifferent', 'lastPlanExecutionDifferent'];
        let nameList = ['differenceAmount', 'expectExecutionDifferenceAmount', 'actualExecutionDifferenceAmount', 'currentLastPlanDifferentAmount', 'lastPlanExecutionDifferentAmount'];
        let index = keyList.indexOf(fateField);
        return nameList[index];
      },

      //合同详情
      goContractInfo(row) {
        let param = {
          contractType: row.contractType,
          contractCode: row.contractCode,
          contractKey: row.primaryKey,
          contractCategory: row.contractCategory,
          headerName: '合同管理',
        };

        let pathName = '/businessAssets/ContractManage/info?';
        for (let i in param) {
          pathName += i + '=' + param[i] + '&';
        }
        window.open(pathName);
      },

      //分页
      pageChange(size) {
        this.currentPage = size;
        this.getProjectIncomeExpend(true);
      },

      //排序（预计执行差异）
      sortFn(model, type) {
        if (type == 'asc') {
          this.sortState = this.sortState == 'asc' ? '' : 'asc';
          this.$emit('sortByDifference', model, type, this.sortState);
        } else {
          this.sortState = this.sortState == 'desc' ? '' : 'desc';
          this.$emit('sortByDifference', model, type, this.sortState);
        }
      },

      //判断哪些是能点击跳转的加pointer小手和下划线
      getPointerClass() {
        let pointClass = '';
        if (this.pageType == 'groupYear' && this.model.isProject) {
          pointClass = 'cursor-pointer-line';
        }
        if (this.pageType == 'groupMonth') {
          if (this.model.isProject) {
            pointClass = 'cursor-pointer-line';
          } else {
            if (this.filed.filedName == 'yearlyBudgetAmount') {
              pointClass = 'cursor-pointer-line';
            }
          }
        }
        if (this.pageType == 'projectMonth') {
          if (this.filed.filedName == 'yearlyBudgetAmount') {
            pointClass = 'cursor-pointer-line';
          }
        }
        return pointClass;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .mask-item {
    line-height: 30px;
  }
  .block-box {
    display: block;
  }
  .bg-black-box {
    ::v-deep .btn-prev,
    ::v-deep .btn-next {
      background: #303133 !important;
      min-width: 15px;
    }
  }
  ::v-deep .el-link.el-link--default {
    color: #ffffff;
  }
  ::v-deep .el-link.el-link--default:hover {
    color: #409eff;
  }
  .color-black {
    color: #000000;
  }
  .color-grey {
    color: #cccccc;
  }
</style>
